select.wok-ui-select {
  border: 1px solid var(--color-border);
  border-radius: var(--size-border-radius);
  font-size: var(--select-font-size);
  background-color: transparent;
  display: block;
  width: 100%;
  color: var(--color-text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-position-y: center;
  background-position-x: calc(100% - 0.6em);
  background-size: 0.6em;
  background-repeat: no-repeat;
  padding: 0.375em 1.8em 0.375em 1em;
  line-height: 1.5;

  &.invalid {
    border-color: var(--color-danger);
  }

  &:disabled {
    cursor: not-allowed;
    background-color: #e9ecef;
  }
}
